<template>
  <div>
    <van-nav-bar fixed title="收银分红奖励" left-arrow class="color-white bg-primary" @click-left="$utils.back($route.path)" />
    <div class="has-top pos-r ">
      <div class="pos-r pt-25">
        <div class="pos-a bg-box" />
        <div class="out-box">
          <div class="inner-box flex-s-c" :style="{backgroundImage:'url('+require('@/assets/images/agencyReward.png')+')',backgroundSize:'100% 100%'}">
            <div class="flex-1">
              <p class="pb-28">{{ initName.periodName }}</p>
              <p class="fs-64 lh-xxs">{{ totalData.periodtotal||0 }}</p>
            </div>
            <div class="flex-1">
              <p class="pb-28">{{ initName.totalName }}</p>
              <p class="fs-64 lh-xxs">{{ totalData.total||0 }}</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex-s-c mt-35 mlr-25">
          <!-- <p class="fs-36 fw-600">奖励明细</p> -->
          <p class="color-black case-box" :class="cashSelect?'case-box-up':'case-box-down'" @click="cashSelect=true">
            {{ selectPlan||"请选择分红方案" }}
          </p>
          <div
            class="date-box bg-gray-1 dis-inb flex-s-c plr-20 br-25 flex-s-0 flex-g-0 ml-20"
            @click="openDataSelect"
          >
            <span>{{ datetime }}</span>
            <van-icon :name="Icon" size="12" />
          </div>
        </div>
        <ul class="mt-30 bg-white pb-40 min-height">
          <li class="flex-s-c tac color-black ptb-20 hb">
            <span class="flex-1">创建时间</span>
            <span class="flex-1">{{ initName.filterTotalName }}</span>
            <span class="flex-1">我的业绩</span>
            <span class="flex-1">{{ initName.filterName }}</span>
          </li>
          <li v-for="(item,index) in RewardList" :key="index" class="flex-s-c tac color-black pt-40">
            <span class="flex-1 color-dark">{{ item.AddTime }}</span>
            <span class="flex-1 fs-26">{{ item.TotalRewardMoney }}</span>
            <span class="flex-1 fs-26">{{ item.Amount }}</span>
            <div class="flex-1 ">
              <p class="color-primary fs-28 fw-b">{{ item.RewardMoney }}</p>
              <p v-show="item.SettleStatus===0" class="fs-20">待结算</p>
            </div>
          </li>
          <no-data v-if="RewardList.length === 0" />
        </ul>
        <!-- 年月选择弹窗 -->
        <datetime-select
          type="year-month"
          title="请选择时间"
          :show="dateSelect"
          @onConfirm="onConfirm"
          @clickOverlay="dateSelect = false"
        />
        <!-- 年选择弹窗 -->
        <van-popup v-model="yearSelect" position="bottom">
          <van-picker
            title="请选择年份"
            show-toolbar
            :columns="columns2"
            :default-index="4"
            @cancel="yearSelect=false"
            @confirm="onConfirm2"
          />
        </van-popup>

        <!-- 方案选择弹窗 -->
        <!-- <van-popup v-model="cashSelect" position="bottom">
          <van-picker
            title="请选择分红方案"
            show-toolbar
            :columns="columns"
            @cancel="cashSelect=false"
            @confirm="onConfirm1"
          />
        </van-popup> -->

        <van-popup
          v-model="cashSelect"
          position="bottom"
        >
          <div>
            <h2 class="fs-34 fw-600 tac dialog-title mb-10 mt-10">请选择分红方案</h2>
            <div class="dialog-content">
              <van-cell v-for="(item,index) in columns" :key="index" clickable class="flex-s-c" @click="onConfirm1(item, index)">
                <template #title>
                  <span class="custom-title">{{ item }}</span>
                </template>
              </van-cell>
            </div>
            <div class="flex-center">
              <van-button class="solid-btn flex-g-1 br-6" @click="cashSelect=false">取消</van-button>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import datetimeSelect from 'components/datetimeSelect'
import noData from 'components/noData'
import { GetUserCashBonusRewardList, GetCashBonusRewardPlanList } from 'api/cashBonusReward'
import utils from 'utils/utils'
export default {
  components: {
    datetimeSelect,
    noData
  },
  data() {
    return {
      initName: {},
      // 时间筛选
      datetime: '',
      setPlanState: false,
      dateSelect: false,
      cashSelect: false,
      yearSelect: false,
      caculType: 2,
      plantList: [],
      selectPlan: '',
      columns: [],
      columns2: [],
      Icon: 'arrow-down',

      totalData: {},
      requestData: {
        planId: 0,
        peroid: 0
      },
      RewardList: []

    }
  },
  watch: {
    dateSelect(newVal, oldVal) {
      if (newVal === true) {
        this.Icon = 'arrow-up'
      } else {
        this.Icon = 'arrow-down'
      }
    }
  },
  created() {
    this.initData()
    this.requestData.moneyType = this.$route.params.type
    this.requestData.peroid = utils.dateFomat('yyyy', new Date()) + '-' + utils.dateFomat('mm', new Date())
    this.GetCashBonusRewardPlanList(this.$route.params.type)
    this.datetime = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月'
    this.resetYearColumn()
    // this.GetUserWaitSettleReward()
  },
  methods: {
    initData() {
      console.log(typeof (this.$route.params.type))
      switch (this.$route.params.type) {
        // 0-返点 1-积分 7-活力值
        case '0':
          this.initName.periodName = '当前分红' + this.$MoneyAlias
          this.initName.totalName = '累计分红' + this.$MoneyAlias
          this.initName.filterTotalName = '总分红' + this.$MoneyAlias
          this.initName.filterName = '分红' + this.$MoneyAlias
          break
        case '1':
          this.initName.periodName = '当前分红' + this.$IntegralAlias
          this.initName.totalName = '累计分红' + this.$IntegralAlias
          this.initName.filterTotalName = '总分红' + this.$IntegralAlias
          this.initName.filterName = '分红' + this.$IntegralAlias
          break
        case '7':
          this.initName.periodName = '当前分红' + this.$VitalityAlias
          this.initName.totalName = '累计分红' + this.$VitalityAlias
          this.initName.filterTotalName = '总分红' + this.$VitalityAlias
          this.initName.filterName = '分红' + this.$VitalityAlias
          break
      }
    },
    resetYearColumn() {
      const thisYear = parseInt(utils.dateFomat('yyyy', new Date()))
      this.columns2 = [thisYear - 4, thisYear - 3, thisYear - 2, thisYear - 1, thisYear, thisYear + 1, thisYear + 2, thisYear + 3, thisYear + 4]
    },
    openDataSelect() {
      if (this.caculType === 0 || this.caculType === 1) {
        this.dateSelect = true
      } else if (this.caculType === 2) {
        this.yearSelect = true
      }
    },
    // 选择方案
    onConfirm1(value, index) {
      this.selectPlan = value
      this.requestData.planId = this.plantList[index].ID
      this.caculType = this.plantList[index].CaculType

      if (this.caculType === 0 || this.caculType === 1) {
        this.datetime = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月'
        this.requestData.peroid = utils.dateFomat('yyyy', new Date()) + '-' + utils.dateFomat('mm', new Date())
      } else if (this.caculType === 2) {
        this.datetime = utils.dateFomat('yyyy', new Date()) + '年'
        this.requestData.peroid = utils.dateFomat('yyyy', new Date())
      }
      this.GetUserCashBonusRewardList()
      this.cashSelect = false
    },
    // 选择年
    onConfirm2(value, index) {
      this.datetime = value + '年'
      this.requestData.peroid = value
      this.RewardList = []
      this.GetUserCashBonusRewardList()
      this.yearSelect = false
    },
    // 选择年月
    onConfirm(value) {
      console.log(value)
      this.datetime = utils.dateFomat('yyyy', value) + '年' + utils.dateFomat('m', value) + '月'
      this.requestData.peroid = utils.dateFomat('yyyy', value) + '-' + utils.dateFomat('mm', value)
      this.RewardList = []
      this.GetUserCashBonusRewardList()
      this.dateSelect = false
    },
    // 设置方案
    setPlan() {
      this.plantList.forEach(item => {
        if (item.ID === this.requestData.planId) {
          this.selectPlan = item.Name
          this.caculType = item.CaculType
        }
      })
    },
    // 获取方案列表
    GetCashBonusRewardPlanList(moneyType) {
      const _this = this
      GetCashBonusRewardPlanList({ moneyType: moneyType }).then(res => {
        if (res) {
          _this.plantList = res.Data
          if (_this.plantList && _this.plantList.length > 0) {
            _this.setPlanState = true
            _this.plantList.forEach(item => {
              _this.columns.push(item.Name)
            })
          }
          this.GetUserCashBonusRewardList()
        }
      })
    },
    // 获取奖励列表
    GetUserCashBonusRewardList() {
      const _this = this
      GetUserCashBonusRewardList(_this.requestData).then(res => {
        if (res) {
          _this.RewardList = res.Data
          if (_this.RewardList && _this.RewardList.length > 0) {
            _this.RewardList.forEach(item => {
              item.AddTime = item.AddTime.split(' ')[0]
            })

            // 设置分红方案
            _this.requestData.planId = _this.RewardList[0].PlanId
            _this.setPlan()
          }
          _this.totalData = res.OtherData
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-nav-bar__title,/deep/.van-icon{
    color:$colorF;
  }
}
/deep/.van-hairline--bottom::after{
  border-bottom: none;
}
.case-box{
  font-size: 28px;
  line-height: 52px;
  border: 1px solid currentColor;
  border-radius: 27px;
  padding: 0 78px 0 32px;
  cursor: pointer;
  position: relative;
}
.case-box-up:after,.case-box-down:after {
  content: '';
  position: absolute;
  width:0;
  height: 0;
  color: $color9;
  top: 21px;
  right: 28px;
  border: 10px solid;
  border-color: currentColor transparent transparent transparent;
}
.case-box-up:after{
   border-color:  transparent transparent currentColor transparent;
   top:8px;
}
.date-box {
  height: 50px;
  line-height: 50px;
}
.bg-box{
  width: 100%;
  height: 100px;
  @include bg-primary;
  top: 0;
  left: 0;
  z-index: 0;
}
.out-box{
  position: relative;
  z-index: 1;
  border-radius: 24px 58px 24px 58px;
  background: $colorF;
  padding: 40px 24px;
  .inner-box{
    border-radius: 24px;
    @include bg-primary;
    color:$colorF;
    font-size: 28px;
    padding: 42px 34px 70px;
  }
}
.content{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  &:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include bg-primary;
    opacity: 0.05;
  }
}
.min-height{
  min-height: calc(100vh - 558px);
}
/* 弹窗 */
.dialog-title {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 20%;
    height: 0;
    border: 2px solid;
    @include border-primary;
    bottom: 0;
    left: 40%;
  }
}
.dialog-content{
  max-height: 50vh;
  overflow-y: scroll;
}
</style>
